<template>
    <div class="box">
      <div class="header">
        <!-- <transition name="fade"> -->
        <index-header ></index-header>
        <!-- </transition> -->
         <index-nav class="nav"></index-nav>
      </div>       
       <div class="center" :class="{'screen':screen}" >
         <router-view></router-view> 
         <index-footer></index-footer>     
       </div>
        
    </div>
</template>
<script>
  import indexHeader from "../index/indexHeader.vue"
  import indexNav from "../index/indexNav.vue"
  import indexFooter from "../index/indexFooter.vue"
  export  default {
    data(){
      return{
        header:true,
        screen:false,
      }
    },
    components:{
      indexHeader,
      indexNav,
      indexFooter
    },
    created(){
      let _this=this
        window.addEventListener("scroll",function(){
          if(document.documentElement.scrollTop>200){
            // console.log( this.header)
            _this.header=false
            //  console.log( this.header)
          }else{
             _this.header=true
          }
                // console.log(document.documentElement.scrollTop);//代表目前滚动条和最上方的距离多长
               
          })
          if(window.screen.width<=1360){
            this.screen=true
          }else{
             this.screen=false
          }
          //  console.log(window.screen.width)
          // if(window.screen.height)
    }
  }
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.nav{
  transition: all 2s
}
/* ::-webkit-scrollbar{width:0;} */

.box{
  width:100%;
  height:100%;
}
.header{
  width:100%;
  height:193px;
  position:fixed;
  z-index:888;
  background:#fff;
  transition: all 2s;
  top:0;
}
.center{
  z-index:88;
  width:100%;
  height:80%;
  /* position: absolute; */
  margin-top: 193px;
  top:26%;
}
.screen{
   z-index:88;
  width:100%;
  height:80%;
  /*position: absolute;*/
  margin-top:-60px;
  top:35%;
}
.screen{
   z-index:88;
  width:100%;
  height:80%;
  /*position: absolute;*/
  /*margin-top:-60px;*/
  margin-top:209px;
  top:35%;
}
/* .center::-webkit-scrollbar {
  display: none;
} */
/* .content{
  z-index:88;
  width:100%;
  height:1000px;
  position: absolute;;
  top:46px;
} */
</style>
